{% extends "@XiaoZhu/base/frame.html.twig" %}

{% block content_header %}
{% endblock %}

{% block content_main %}
    <div class="main">
        <div class="container">
            <!-- BEGIN SIDEBAR & CONTENT -->
            <div class="row margin-bottom-40">
                <!-- BEGIN CONTENT -->
                <div class="col-md-12 col-sm-12">
                    <h1>购物车</h1>
                    <div class="shopping-cart-page">
                        {% if lists is empty %}
                            <div class="shopping-cart-data clearfix">
                                <p>购物车空空如也!</p>
                            </div>
                        {% else %}

                            <div class="shopping-cart-data clearfix">
                                <div class="table-wrapper-responsive">
                                    <table summary="Shopping cart">
                                        <tbody><tr>
                                            <th class="shopping-cart-image">商品图片</th>
                                            <th class="shopping-cart-description">商品信息</th>
                                            <th class="shopping-cart-ref-no">商品编号</th>
                                            <th class="shopping-cart-quantity">数量</th>
                                            <th class="shopping-cart-price">单价</th>
                                            <th class="shopping-cart-total" colspan="2">小计</th>
                                        </tr>
                                        {% for product in lists %}
                                            <tr class="cart_row_{{ product.basic.id }}">
                                                <td class="shopping-cart-image">
                                                    <a href="#"><img src="{{ product.show.cover }}" alt="Berry Lace Dress"></a>
                                                </td>
                                                <td class="shopping-cart-description">
                                                    <h3><a href="#">{{ product.basic.name }}</a></h3>
                                                    <p>{{ product.show.title }}</p>
                                                    <em>详细信息</em>
                                                </td>
                                                <td class="shopping-cart-ref-no">
                                                    {{ product.basic.no }}
                                                </td>
                                                <td class="shopping-cart-quantity">
                                                    <div class="product-quantity cart_row_num">
                                                            <input id="{{ product.basic.id }}" oldData="{{ product.num }}" price="{{ product.basic.price }}"  type="text" value="{{ product.num }}"  class="form-control input-sm" onchange="modCartNum({{ product.basic.id }},{{ product.basic.price }})">
                                                        {#<div class="input-group bootstrap-touchspin input-group-sm">#}
                                                            {#<span class="input-group-btn">#}
                                                                {#<button class="btn quantity-down bootstrap-touchspin-down" type="button">#}
                                                                    {#<i class="fa fa-angle-down"></i>#}
                                                                {#</button>#}
                                                            {#</span>#}
                                                            {#<span class="input-group-addon bootstrap-touchspin-prefix"></span>#}
                                                            {#<input id="product-quantity" oldData="{{ product.num }}" type="text" value="{{ product.num }}" onchange="modCartNum({{ product.basic.id }},{{ product.basic.price }})" readonly="" class="form-control input-sm">#}
                                                            {#<span class="input-group-addon bootstrap-touchspin-postfix"></span>#}
                                                            {#<span class="input-group-btn">#}
                                                                {#<button class="btn quantity-up bootstrap-touchspin-up" type="button">#}
                                                                    {#<i class="fa fa-angle-up"></i>#}
                                                                {#</button>#}
                                                            {#</span>#}
                                                        {#</div>#}
                                                    </div>
                                                </td>
                                                <td class="shopping-cart-price">
                                                    <strong><span>￥</span>{{ product.basic.price }}</strong>
                                                </td>
                                                <td class="shopping-cart-total">
                                                    <strong><span>￥</span>{{ product.total }}</strong>
                                                </td>
                                                <td class="del-goods-col">
                                                    <a class="del-goods" href="javascript:removeFromCart({{ product.basic.id }});"><i class="fa fa-times"></i></a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody></table>
                                </div>

                                <div class="shopping-total">
                                    <ul>
                                        {#<li>#}
                                        {#<em>Sub total</em>#}
                                        {#<strong class="price"><span>$</span>47.00</strong>#}
                                        {#</li>#}
                                        <li>
                                            <em>数量</em>
                                            <strong class="price"><span style="color: #333;" class="cart_total_num">{{ num }}</span></strong>
                                        </li>
                                        <li class="shopping-total-price">
                                            <em>总价</em>
                                            <strong class="price"><span>￥</span><span class="cart_total_price">{{ total }}</span></strong>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="btn btn-default" type="submit">继续购物 <i class="fa fa-shopping-cart"></i></button>
                            <button class="btn btn-primary" type="submit"> 结算 <i class="fa fa-check"></i></button>
                        {% endif %}
                    </div>
                </div>
                <!-- END CONTENT -->
            </div>
            <!-- END SIDEBAR & CONTENT -->

            <!-- BEGIN SIMILAR PRODUCTS -->
            {#热门商品#}
            <!-- END SIMILAR PRODUCTS -->
        </div>
    </div>
{% endblock %}

{% block content_footer %}
{% endblock %}
